<template>
  <div>
    <div class="header">请假申请</div>
    <div class="form_title">
      <el-row>
        <el-col :span="12">
          <div class="">申请人：{{ username }}</div>
        </el-col>
        <el-col :span="12">
          <div class="">申请部门：{{ mainDeptName }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="body_table">
      <el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="100px" center
               :disabled="formDisabled"
      >
        <table class="mailTable">
          <tr class="firstTr">
            <td class="column firstTd title">
              <span class="tip">*</span>请假类别
            </td>
            <td>
              <div class="form_item">
                <el-form-item prop="type_code">
                  <el-select filterable clearable v-model="cuForm.type_code" placeholder="请选择请假类别"
                             style="width:100%"
                  >
                    <el-option v-for="item in leaveTypeList" :key="item.code" :label="item.name" :value="item.code">
                      {{ item.name }}
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd title">
              <span class="tip">*</span>开始时间
            </td>
            <td>
              <div class="form_item">
                <el-form-item prop="start_time">
                  <el-date-picker filterable clearable v-model="cuForm.start_time" type="datetime" placeholder="请选择开始时间"
                                  value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                                  style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd title">
              <span class="tip">*</span>结束时间
            </td>
            <td>
              <div class="form_item">
                <el-form-item prop="end_time">
                  <el-date-picker filterable clearable v-model="cuForm.end_time" type="datetime" placeholder="请选择结束时间"
                                  value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
                                  style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </td>
          </tr>
          <tr class="firstTr">
            <td class="column firstTd title">
              <span class="tip">*</span>请假事由
            </td>
            <td>
              <div class="form_item">
                <el-form-item prop="reason">
                  <el-input clearable type="textarea" v-model.trim="cuForm.reason" :rows="4" maxlength="50"
                            show-word-limit
                            placeholder="请输入请假事由"
                  >
                  </el-input>
                </el-form-item>
              </div>
            </td>
          </tr>
        </table>
      </el-form>
			<div v-if="!!(($route.params || {}).id || (($route.params || {}).handle_param || {}).id)">
				<flowCheckHistory :flowType="2" :dataId="($route.params || {}).id || (($route.params || {}).handle_param || {}).id"/>
			</div>
      <span class="footer">
        <el-button icon="el-icon-back" @click="closeThisPage">关闭</el-button>
        <el-button v-if="showAdopt && cuForm.can_check" type="success" icon="el-icon-success"
                   @click.native="showDialog"
        >通过
        </el-button>
        <el-button v-if="showReject && cuForm.can_check" type="danger" icon="el-icon-error"
                   @click.native="showDialog(false)"
        >驳回
        </el-button>
        <el-button v-if="showSubmit" type="primary" icon="el-icon-circle-plus" @click="submit">提交</el-button>
        <el-button v-if="showSave" type="primary" icon="el-icon-circle-plus-outline" @click="saveInfo">保存</el-button>
        <el-button v-if="showRemove" type="danger" icon="el-icon-circle-close" @click="remove">删除</el-button>
        <el-button v-if="showActualDelete" type="danger" icon="el-icon-circle-close" @click="actualDelete"
        >彻底删除</el-button>
      </span>
    </div>
    <el-dialog title="审批意见" :visible.sync="dialogFormVisible" width="500px" @close="checkDialogClose">
      <el-form :model="form">
        <el-form-item label-width="0">
          <el-input v-model="form.opinion" type="textarea" :rows="5"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :type="is_adopt?'primary':'danger'" @click="dialogCheck">{{ is_adopt ? '通过' : '驳回' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { actualDelete, check, remove, save, submit, one } from '@/api/attendance/leave_apply'
import flowCheckHistory from '@/components/FlowCheckHistory'

export default {
  name: 'leave_apply_info',
  async created() {
    this.getLeaveTypeList()
    const params = this.$route.params
    console.log(params)
    // 如果params不为空则进行处理
    if (params) {
      // 如果是点击请假申请过来的
      if (params.is_created) {
        this.formDisabled = false// 取消禁用表单
        this.showSave = true
        this.showSubmit = true
      } else if (params.handle_param) { // 如果是从审批过来的
        await one({
          flow_id: params.handle_param.id
        }).then(
          res => {
            this.cuForm = res.data
            console.log(this.cuForm)
          }
        ).catch(() => {
          this.$message.error('获取信息失败')
        })
        if (params.handle_param.wf_data_id) {
          this.wf_data_id = params.handle_param.wf_data_id// 如果wf_data_id有值
        }
        if (params.handle_param.type == 1) { // 如果是发起或删除
          this.formDisabled = false
          if (params.handle_param.from == 4) {
            this.showSave = true
            this.showSubmit = true
            this.showRemove = true
          } else if (params.handle_param.from == 5) {
            this.showSave = true
            this.showSubmit = true
            this.showRemove = true
          } else if (params.handle_param.from == 6) {
            this.showSave = true
            this.showSubmit = true
            this.showActualDelete = true
          }
        } else if (params.handle_param.type == 2) { // 如果是审批
          this.showReject = true
          this.showAdopt = true
        } else {
          if (params.handle_param.from == 2) {
            this.showRemove = true
          }
        }
      }
    }
  },
  data() {
    return {
      dialogCULoading: false,
      cuRules: {
        type_code: [{
          required: true,
          message: '请选择请假类别',
          trigger: ['blur', 'change']
        }],
        start_time: [{
          required: true,
          message: '请选择开始时间',
          trigger: ['blur', 'change']
        }, {
          validator: this.validationStartTime,
          trigger: ['blur', 'change']
        }],
        end_time: [{
          required: true,
          message: '请选择结束时间',
          trigger: ['blur', 'change']
        }, {
          validator: this.validationEndTime,
          trigger: ['blur', 'change']
        }],
        reason: [{
          required: true,
          message: '请输入请假事由',
          trigger: ['blur', 'change']
        }]
      },
      cuForm: {
        id: null,
        type_code: null,
        start_time: null,
        end_time: null,
        reason: null
      },
      leaveTypeList: [],
      showAdopt: false,
      showReject: false,
      showSubmit: false,
      showSave: false,
      showRemove: false,
      showActualDelete: false,
      dialogFormVisible: false,
      form: {
        opinion: null
      },
      is_adopt: false, // 是否是通过
      wf_data_id: null,
      formDisabled: true
    }
  },
	components:{flowCheckHistory},
  computed: {
    username() {
      const params = this.$route.params
      if (params.handle_param) {
        return this.cuForm.user_name
      } else {
        return this.$store.state.user.name
      }
    },
    mainDeptName() {
      const params = this.$route.params
      if (params.handle_param) {
        return this.cuForm.main_dept_name
      } else {
        return this.$store.state.user.mainDeptName
      }
    }
  },
  mounted() {
    this.view = {
      name: this.$route.name
    }
  },
  methods: {
    // 获取请假类别
    getLeaveTypeList() {
      return list_all3rd_bycode({ code: 'kqxg-qjlb' })
        .then(res => {
          this.leaveTypeList = res.data
        })
    },
    // 显示对话框
    showDialog(flag = true) {
      this.dialogFormVisible = true
      this.is_adopt = flag
    },
    saveInfo() {
      this.$refs['cuForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确定保存至草稿箱?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: '提交中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            const params = this.$route.params
            if (params && params.handle_param && params.handle_param.from == 5) {
              // 从已删除保存需提交wd_data_id
              this.wf_data_id = null
            }
            save(this.cuForm, { wf_data_id: this.wf_data_id }).then(
              res => {
                if (res.data) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.closeThisPage()
                } else {
                  this.$message.error('操作失败')
                }
                loading.close()
              }
            ).catch(() => {
              loading.close()
            })
          }).catch(() => {

          })
        }
      })
    },
    submit() {
      this.$refs['cuForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: '提交中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            submit(this.cuForm, { wf_data_id: this.wf_data_id }).then(
              res => {
                if (res.data) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.closeThisPage()
                } else {
                  this.$message.error('操作失败')
                }
                loading.close()
              }
            ).catch(() => {
              loading.close()
            })
          }).catch(() => {

          })
        }
      })
    },
    remove() {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ flow_id: this.cuForm.id, wf_data_id: this.wf_data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    actualDelete() {
      this.$confirm('彻底删除将无法找回，确定继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        actualDelete({ flow_id: this.cuForm.id, wf_data_id: this.wf_data_id }).then(
          res => {
            if (res.data) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.closeThisPage()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    // 关闭此页面
    closeThisPage() {
      this.$store.dispatch('tagsView/closePage', this.view.name)
    },
    dialogCheck() {
      this.dialogFormVisible = false
      if (this.is_adopt) {
        this.check()
      } else {
        this.check(true)
      }
    },
    check(isReturn = false) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      check({
        flow_id: this.cuForm.id,
        isReturn: isReturn,
        wf_data_id: this.wf_data_id,
        opinion: this.form.opinion
      }).then(
        res => {
          if (res.data) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.closeThisPage()
          } else {
            this.$message.error('操作失败')
          }
          loading.close()
        }
      ).catch(() => {
        loading.close()
      })
    },
    // 弹框关闭方法
    checkDialogClose() {
      this.form = {
        opinion: null
      }
      this.is_adopt = false
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 80%;
  font-size: 14px;
  margin: 0 auto 10px auto;
}

.mailTable tr td {
  width: 400px;
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  width: 150px !important;
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.tip {
  color: red;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

.body_table {
  width: 50%;
  margin: 0 auto;
}

.form_title {
  width: 50%;
  margin: 0 auto;
  font-size: 14px;
}

/deep/ .form_title .el-row {
  width: 80%;
  margin: 5px auto;
}

/deep/ .form_title .el-row .el-col {
  padding-left: 10px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item__content {
  margin: 0 auto !important;
  text-align: center;
}

.form_item {
  width: 300px;
  margin: 0px auto;
}

.footer {
  display: block;
  width: 70%;
  margin: 20px auto;
  text-align: center;
}
.title {
  background: #F5F7FA
}
</style>
